
<template>
  <el-dialog v-model="ifShow" :title="modelTitle" width="88rem" :before-close="handleCancel">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商" prop="supplierId">
            <el-select filterable @change="handleSupplierChange" clearable v-model="formData.supplierId" placeholder="请选择">
              <el-option v-for="item in supplierOptions" :key="item.id" :label="item.companyName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="司机名称" prop="driverName">
            <el-input v-model="formData.driverName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="司机电话" prop="driverPhone">
            <el-input v-model="formData.driverPhone" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择">
              <el-option :value="1" label="男"></el-option>
              <el-option :value="2" label="女"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="城市" prop="cityId">
            <el-select filterable clearable v-model="formData.cityId" placeholder="请选择" @change="handleCityChange">
              <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车型" prop="vehicleSeriesId">
            <el-select filterable clearable v-model="formData.vehicleSeriesId" placeholder="请选择" @change="handleCarChange">
              <el-option v-for="item in carOptions" :key="item.id" :label="`${item.vehicleBrand}-${item.vehicleSeries}`" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车辆颜色" prop="carColour">
            <el-select v-model="formData.carColour" placeholder="请选择">
              <el-option value="黑色">黑色</el-option>
              <el-option value="银色">银色</el-option>
              <el-option value="灰色">灰色</el-option>
              <el-option value="白色">白色</el-option>
              <el-option value="红色">红色</el-option>
              <el-option value="金色">金色</el-option>
              <el-option value="蓝色">蓝色</el-option>
              <el-option value="棕色">棕色</el-option>
              <el-option value="紫色">紫色</el-option>
              <el-option value="绿色">绿色</el-option>
              <el-option value="粉色">粉色</el-option>
              <el-option value="橙色">橙色</el-option>
              <el-option value="黄色">黄色</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车牌号" prop="carNo">
            <el-input v-model="formData.carNo" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="formData.idCard" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="动力类型" prop="powerType">
            <el-select v-model="formData.powerType" placeholder="请选择">
              <el-option value="电车">电车</el-option>
              <el-option value="油车">油车</el-option>
              <el-option value="油电混动">油电混动</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证初次领证日期" prop="driverLicenseStartTime">
            <el-date-picker placeholder="驾驶证初次领证日期" v-model="formData.driverLicenseStartTime" value-format="YYYY-MM-DD" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="司机状态" prop="status">
            <el-select v-model="formData.status" placeholder="请选择">
              <el-option :value="1" label="审核通过"></el-option>
              <el-option :value="2" label="审核驳回"></el-option>
              <el-option :value="0" label="待审核"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="司机等级" prop="grade">
            <el-input v-model="formData.grade" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证正面图" prop="idCardImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 1)" />
              <el-image :preview-src-list="[idCardUrl]" @click="handlePreviewClick" v-if="idCardUrl" :src="idCardUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证主页" prop="driverLicenseFrontImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 2)" />
              <el-image :preview-src-list="[driveFrontUrl]" @click="handlePreviewClick" v-if="driveFrontUrl" :src="driveFrontUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证副业" prop="driverLicenseBackImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 3)" />
              <el-image :preview-src-list="[driveBackUrl]" @click="handlePreviewClick" v-if="driveBackUrl" :src="driveBackUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行驶证主页" prop="vehicleLicenseFrontImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 4)" />
              <el-image
                :preview-src-list="[vehicleFrontUrl]"
                @click="handlePreviewClick"
                v-if="vehicleFrontUrl"
                :src="vehicleFrontUrl"
                style="width: 104px; height: 104px; left: -30%"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行驶证副页" prop="vehicleLicenseBackImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 5)" />
              <el-image
                :preview-src-list="[vehicleBackUrl]"
                @click="handlePreviewClick"
                v-if="vehicleBackUrl"
                :src="vehicleBackUrl"
                style="width: 104px; height: 104px; left: -30%"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="交强险照片" prop="compulsoryInsuranceImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 7)" />
              <el-image :preview-src-list="[compuUrl]" @click="handlePreviewClick" v-if="compuUrl" :src="compuUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商业险照片" prop="commercialInsuranceImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 8)" />
              <el-image :preview-src-list="[commerUrl]" @click="handlePreviewClick" v-if="commerUrl" :src="commerUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="网约车运输证照片" prop="transportLicenceImg">
            <div style="position: relative; display: flex">
              <input class="ipt" type="file" @change="handleFileChange($event, 9)" />
              <el-image :preview-src-list="[transUrl]" @click="handlePreviewClick" v-if="transUrl" :src="transUrl" style="width: 104px; height: 104px; left: -30%" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog :visible="previewVisible" title="图片预览">
    <img :src="currentPreviewUrl" style="width: 100%" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import CommonApi from "@/api/common";
import JntApi from "@/api/jnt";
import Supplier from "@/api/supplier";
import { channelArr, bizTypeArr, orderTypeArr, platFormArr, carTypeArr } from "@/enums/common";
import DriverApi from "@/api/driver";

const props = defineProps<{}>();
const emit = defineEmits(["success"]);
const formRef: any = ref(null);
let formData: any = reactive({
  // id: "",
  // supplierId: undefined,
  // grade: "",
  // driverName: "",
  // driverPhone: "",
  // sex: undefined,
  // cityId: undefined,
  // cityName: "",
  // vehicleBrand: "",
  // carColour: "",
  // carNo: "",
  // idCard: "",
  // idCardImg: "",
  // driverLicenseStartTime: "",
  // driverLicenseFrontImg: "",
  // driverLicenseBackImg: "",
  // driverImg: "",
  // compulsoryInsuranceImg: "",
  // transportLicenceImg: "",
  // commercialInsuranceImg: "",
  // vehicleLicenseFrontImg: "",
  // vehicleLicenseBackImg: "",
  // status: "",
  // powerType: "",
  // vehicleSeries: "",
  // vehicleSeriesId: "",
  // supplierName: "",
});
const rules = reactive({
  driverName: [{ required: true, message: "请输入司机名称!" }],
  driverPhone: [{ required: true, message: "请输入司机电话!" }],
  sex: [{ required: true, message: "请输入性别 1:男 2：女!" }],
  vehicleSeriesId: [{ required: true, message: "请选择车型" }],
  carColour: [{ required: true, message: "请输入车辆颜色!" }],
  carNo: [{ required: true, message: "请输入车牌号!" }],
  idCardImg: [{ required: true, message: "请输入身份证正面图!" }],
  driverLicenseStartTime: [{ required: true, message: "请选择驾驶证初次领证日期!" }],
  driverLicenseFrontImg: [{ required: true, message: "请输入驾驶证正面照片!" }],
  driverLicenseBackImg: [{ required: true, message: "请输入驾驶证反面照片!" }],
  status: [{ required: true, message: "请选择司机状态!" }],
});
const ifShow = ref(false);
const modelTitle = ref();
const cityOptions = ref();
const supplierOptions = ref();
const carOptions = ref();
const idCardUrl = ref();
const driveFrontUrl = ref();
const driveBackUrl = ref();
const vehicleFrontUrl = ref();
const vehicleBackUrl = ref();
const driverUrl = ref();
const compuUrl = ref();
const commerUrl = ref();
const transUrl = ref();

function edit(title: any, row: any) {
  modelTitle.value = title;
  ifShow.value = true;
  idCardUrl.value = row.idCardImg;
  driveFrontUrl.value = row.driverLicenseFrontImg;
  driveBackUrl.value = row.driverLicenseBackImg;
  vehicleFrontUrl.value = row.vehicleLicenseFrontImg;
  vehicleBackUrl.value = row.vehicleLicenseBackImg;
  driverUrl.value = row.driverImg;
  compuUrl.value = row.compulsoryInsuranceImg;
  commerUrl.value = row.commercialInsuranceImg;
  transUrl.value = row.transportLicenceImg;
  //赋值
  Object.assign(formData, row);
}

/**
 * 确定按钮点击事件
 */
async function handleOk() {
  await formRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      let model: any = formData;
      DriverApi.driverEdit(model).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success(res.message);
          formRef.value.resetFields();
          emit("success");
          handleCancel();
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
}

//城市下拉框点击事件
function handleCityChange(value: any) {
  formData.cityName = cityOptions.value.find((item: any) => item.id == value).name;
}
//供应商下拉
function handleSupplierChange(value: any) {
  formData.supplierName = supplierOptions.value.find((item) => item.id == value).companyName;
}
//车型下拉
function handleCarChange(value: any) {
  formData.vehicleType = carOptions.value.find((item) => item.id == value).vehicleType;
  formData.vehicleBrand = carOptions.value.find((item) => item.id == value).vehicleBrand;
  formData.vehicleSeries = carOptions.value.find((item) => item.id == value).vehicleSeries;
}

/**
 * 取消按钮回调事件
 */
function handleCancel() {
  formRef.value.resetFields();
  ifShow.value = false;
}

//组织图片默认行为
function handlePreviewClick(event) {
  event.stopPropagation(); // 阻止事件冒泡以防止触发上传行为
}
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

const handleFileChange = (event: any, type: any) => {
  if (type == 1) {
    getBase64(event.target.files[0], (base64Url: string) => {
      idCardUrl.value = base64Url;
    });
  } else if (type == 2) {
    getBase64(event.target.files[0], (base64Url: string) => {
      driveFrontUrl.value = base64Url;
    });
  } else if (type == 3) {
    getBase64(event.target.files[0], (base64Url: string) => {
      driveBackUrl.value = base64Url;
    });
  } else if (type == 4) {
    getBase64(event.target.files[0], (base64Url: string) => {
      vehicleFrontUrl.value = base64Url;
    });
  } else if (type == 5) {
    getBase64(event.target.files[0], (base64Url: string) => {
      vehicleBackUrl.value = base64Url;
    });
  } else if (type == 6) {
    getBase64(event.target.files[0], (base64Url: string) => {
      driverUrl.value = base64Url;
    });
  } else if (type == 7) {
    getBase64(event.target.files[0], (base64Url: string) => {
      compuUrl.value = base64Url;
    });
  } else if (type == 8) {
    getBase64(event.target.files[0], (base64Url: string) => {
      commerUrl.value = base64Url;
    });
  } else if (type == 9) {
    getBase64(event.target.files[0], (base64Url: string) => {
      transUrl.value = base64Url;
    });
  }

  //请求阿里云拿到上传参数
  console.log("RERR", event);

  CommonApi.getOssParam({ fileType: 1 }).then((res) => {
    let data = {
      policy: res.result.policy,
      OSSAccessKeyId: res.result.accessId,
      signature: res.result.signature,
      success_action_status: res.result.success_action_status,
      key: res.result.key,
      name: res.result.name,
      file: event.target.files[0],
    };
    if (type == 1) {
      formData.idCardImg = res.result.key;
    } else if (type == 2) {
      formData.driverLicenseFrontImg = res.result.key;
    } else if (type == 3) {
      formData.driverLicenseBackImg = res.result.key;
    } else if (type == 4) {
      formData.vehicleLicenseFrontImg = res.result.key;
    } else if (type == 5) {
      formData.vehicleLicenseBackImg = res.result.key;
    } else if (type == 6) {
      formData.driverImg = res.result.key;
    } else if (type == 7) {
      formData.compulsoryInsuranceImg = res.result.key;
    } else if (type == 8) {
      formData.commercialInsuranceImg = res.result.key;
    } else if (type == 9) {
      formData.transportLicenceImg = res.result.key;
    }

    console.log("DDD", data);
    console.log("res.result.host", res.result.host);
    console.log(data);

    CommonApi.common(data, res.result.host, "post").then((res) => {});
  });
};

defineExpose({
  edit,
});
onMounted(() => {
  CommonApi.getCity({ pageNo: 1, pageSize: 9999 }).then((data) => {
    if (data.code == 0) {
      cityOptions.value = data.result;
    }
  });
  CommonApi.getSupplier({ pageNo: 1, pageSize: 9999 }).then((data) => {
    if (data.code == 0) {
      supplierOptions.value = data.result;
    }
  });
  CommonApi.getCars({ pageNo: 1, pageSize: 9999 }).then((data) => {
    if (data.code == 0) {
      carOptions.value = data.result;
    }
  });
});
</script>
<style lang="scss" scoped>
.flex_box {
  display: flex;
  margin-bottom: 14px;
  position: relative;
}
</style>
